aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/routes/matches/[match_id].svelte
diff options
context:
space:
mode:
Diffstat (limited to 'web/pw-server/src/routes/matches/[match_id].svelte')
-rw-r--r--web/pw-server/src/routes/matches/[match_id].svelte20
1 files changed, 18 insertions, 2 deletions
diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index bbb25e1..653b3bf 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -29,6 +29,7 @@
export let matchLog: string | undefined;
export let matchData: object;
+ let showSidebar = true;
onMount(async () => {
const apiClient = new ApiClient();
@@ -54,6 +55,10 @@
return matchPlayer["owner_id"] === user?.["user_id"];
}
+ function toggleSidebar() {
+ showSidebar = !showSidebar;
+ }
+
// using the same value here causes svelte to freeze
let dropdownSelectedPlayer: any;
let selectedPlayer: any;
@@ -65,8 +70,14 @@
</script>
<div class="container">
- <Visualizer {matchLog} {matchData} />
- {#if playersWithVisibleLog.length > 0}
+ <Visualizer {matchLog} {matchData}>
+ <div slot="menu">
+ {#if playersWithVisibleLog.length > 0}
+ <div class="toggle-sidebar" on:click={toggleSidebar}>toggle sidebar</div>
+ {/if}
+ </div>
+ </Visualizer>
+ {#if showSidebar && playersWithVisibleLog.length > 0}
<div class="output-pane">
<div class="player-select">
{#if playersWithVisibleLog.length == 1}
@@ -126,4 +137,9 @@
flex-direction: column;
background-color: variables.$bg-color;
}
+
+ .toggle-sidebar:hover {
+ cursor: pointer;
+ color: #ccc;
+ }
</style>